import React, { useCallback, useRef } from 'react';
import {
  useDragDrop,
  useDrop,
  useDrag,
} from '@/components/editor/utils/dragDrop';
import cl from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
import './index.less';
import Item from './Item';
import clonedeep from 'clonedeep';

interface DragItem {
  type: string;
  data: any;
  dragParentId: string;
  dragIndex: number;
}

export default function Design() {
  const selector = useCallback(
    (_) => ({
      state: _,
    }),
    [],
  );
  const dispatch = useDispatch();
  const { state } = useSelector(selector);

  const dropRef = useRef(null);
  const dragDrop = useDragDrop({
    data: state.layout.dataCenter['root'],
  });
  const { dataCenter } = dragDrop;

  let children = dragDrop.dataCenter['root'].sons.map((son) => {
    return dataCenter[son];
  });

  const [{ canDrop, isOver }, drop] = useDrop(dragDrop.useDrop());

  drop(dropRef);

  // const [{ isDragging }, drag, connectDragPreview] = useDrag(() => {
  //   const dragData = {
  //     data,
  //   };
  //   return {
  //     type: 'CRAD',
  //     item: dragData,
  //     collect: (monitor) => ({
  //       isDragging: monitor.isDragging(),
  //     }),
  //   };
  // }, [data,]);

  return (
    <div ref={dropRef} className="page-design-main">
      {children.map((item, index) => {
        return (
          <Item
            parentId={dataCenter['root'].id}
            index={index}
            data={item}
            key={item.id}
          />
        );
      })}
      {isOver && canDrop ? <div className="border my-1" /> : null}
    </div>
  );
}
